<!DOCTYPE html>
<html>
<head>
    <title>20分钟:我的bootstrap首页</title>
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css" rel="stylesheet">
</head>
<style>
    body{
        padding-top: 70px;
    }
</style>
<body data-spy="scroll" data-target="#myScrollspy">
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand " href="#" style="color: darkorange;background-color: #000000; border-radius: 50px">
                    <span class="glyphicon glyphicon-globe" style="color: deepskyblue"></span>
                    DQ
                </a>
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#"> 街 </a></li>
                    <li><a href="#"> 区 </a></li>
                    <li><a href="#"> 市 </a></li>
                    <li><a href="#"> 省 </a></li>
                    <li><a href="#"> 国家 </a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 星球 <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">账 户</a></li>
                            <li><a href="#">设 置</a></li>
                            <li class="divider"></li>
                            <li class="disabled"><a href="#">退 出</a></li>
                        </ul>
                    </li>
                    <form class="navbar-form pull-right" role="search">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="...">
                        </div>
                        <button type="submit" class="btn btn-default">
                            <span class="glyphicon glyphicon-search"></span>
                        </button>
                    </form>
                </ul>
            </div>

        </div>
    </nav>

    <div class="container">
        <div class='col-md-9'>
            <div id="p5" class='jumbotron'>
                </div>
            <div id="p4" class='jumbotron'>
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <label for="inputEmail" class="col-sm-2 control-label">Email</label>
                        <div class="col-sm-10">
                            <input type="email" class="form-control" id="inputEmail" placeholder="Email">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputPassword" class="col-sm-2 control-label">Password</label>
                        <div class="col-sm-10">
                            <input type="password" class="form-control" id="inputPassword" placeholder="Password">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox"> Remember me
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="submit" class="btn btn-default">Sign in</button>
                        </div>
                    </div>
                </form>
            </div>
            <div id="p1" class='jumbotron'>
                <h2>道具:Section 1</h2>
                <p>　　小歌班初期的“砌末”(道具)，都是日常生活用具，后期及绍兴文戏时期，模仿京剧、绍剧道具，并由“检场”人(越剧称“值台师傅”)管理。所用道具都放在一大木箱(俗称“百宝箱”)里。这些道具是向“堂中行头”师傅租来的。以后，主要演员有了“私房行头”，道具中的桌围、椅帔也成了主要演员必备的“私彩”。</p>
                <p>　　当时，为与比较写实的布景吻合，以及表演上的需要，对舞台上常用的道具，如刀、枪、剑、棍、马鞭等，加以改良，达到美观、轻巧，适合女演员使用。而对另一些道具，就直接采用生活用品，或仿真制作。其时越剧界出现了兼职主管道具的演职人员，开始向“王生记”家具店租用红木家具，向电影厂租用道具，或去旧货店及豫园小商品摊档购买生活用品。特殊需要的道具，按图样到灯彩店去定做。道具制作师，采用翻模脱胎、篾扎纸糊、立粉彩绘、刻花裱托等工艺技法，制作出各式各样道具。</p>
            </div>
            <div id="p2" class='jumbotron'>
                <h2>道具:Section 2</h2>
                <p>　　如《梁山伯与祝英台》中的酒杯、花瓶，形态逼真。《情探》中的龙王、神像,《北地王》中的先祖列宗，都用篾扎纸糊后彩绘，似庙里菩萨一般。《红楼梦》中的花篮、薰炉、立地花瓶等，都是既逼真又美观，令观者赏心悦目。越剧的道具，具有“轻”“巧”“美”“牢”的艺术特点，为戏曲界同行所称道，如明角灯，各地不少兄弟剧种剧团，曾派人到上海越剧院来学习过道具制作。</p>
                <p>　　1981年9月，上海越剧院演出的《凄凉辽宫月》中的道具(由技师李其实制作)，获首届上海戏剧节道具奖，首开道具获单项奖的先例。</p>
            </div>
            <div id="p3" class='jumbotron'>
                <h2>Main Content Section 3</h2>
                <p>Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.</p>
                <p>Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.</p>
            </div>
        </div>
        <div class="col-md-3" id="myScrollspy">
            <div class="nav nav-tabs nav-stacked affix-top" data-spy="affix" data-offset-top="10">
                <a class="list-group-item active">定位坐标</a>
                <a href="#p1" class="list-group-item">道具:Section 1</a>
                <a href="#p2" class="list-group-item">道具:Section 2</a>
                <a href="#p3" class="list-group-item">Main Content Section 3</a>
            </div>
        </div>

    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</body>
</html>